import { Component } from 'react';
import { Button, Select } from 'antd';
import './watchQuestion.less';
import { SearchOutlined } from '@ant-design/icons';
import { connect,history } from 'umi';
import { WatchQuestionModelState } from '@/models/watchQuestion';
import { Questions_Condition } from '@/type/watchQuestion';
import {
  Exam_Type,
  Questions_Type,
  Subject_Item,
  Questions_List_Item,
} from '@/type/watchQuestion';
const { Option } = Select;
interface IState {
  watchQuestion: WatchQuestionModelState;
}
interface IProps {
  getExamType: () => void;
  getQuestionsType: () => void;
  getSubjectList: () => void;
  getQuestionsList: () => void;
  getQuestionsCondition: (payload: Questions_Condition) => void;
  examTypeList: Exam_Type[];
  questionsType: Questions_Type[];
  subjectList: Subject_Item[];
  questionList: Questions_List_Item[];
}
class WatchQuestion extends Component<IProps> {
  state = {
    questions_type_id: '', //试题类型id
    subject_id: '', //课程id
    exam_id: '', //考试类型id
    cardIndex: 0,
  };
  //生命周期获取数据
  componentDidMount() {
    //获取考试类型
    this.props.getExamType();
    //获取试题类型
    this.props.getQuestionsType();
    //获取课程
    this.props.getSubjectList();
    //获取所有试题
    this.props.getQuestionsList();
  }
  //点击课程改变
  changeSubjectId(value: string,cardIndex:number) {
    this.setState(
      {
        subject_id: value,
        cardIndex
      },
      () => {
        this.getQuestionsList();
      },
    );
  }
  //下拉框改变时触发
  handleChange(name: string, value: string) {
    this.setState({
      [name]: value,
    });
  }
  //按条件获取数据
  getQuestionsList() {
    let { questions_type_id, subject_id, exam_id } = this.state;
    this.props.getQuestionsCondition({
      questions_type_id: questions_type_id ? questions_type_id : undefined,
      exam_id: exam_id ? exam_id : undefined,
      subject_id: subject_id ? subject_id : undefined,
    });
  }
  //过滤删选
  filter() {
    this.getQuestionsList();
  }
  render() {
    let { examTypeList, questionsType, subjectList, questionList } = this.props;
    let { cardIndex } = this.state;
    return (
      <div className="watchQuestion">
        <p>查看试题</p>
        <div className="watchQuestion_title">
          <div className="watchQuestion_title_top">
            <b>课程类型：</b>
            <div>
              <span
                className={cardIndex == 0 ? 'active' : ''}
                onClick={this.changeSubjectId.bind(this, '',0)}
              >
                all
              </span>
              {subjectList &&
                subjectList.map((item, index) => {
                  return (
                    <span
                      className={cardIndex == index + 1 ? 'active' : ''}
                      onClick={this.changeSubjectId.bind(this, item.subject_id,index+1)}
                      key={item.subject_id}
                    >
                      {item.subject_text}
                    </span>
                  );
                })}
            </div>
          </div>
          <div className="watchQuestion_title_center">
            <div>
              <span>考试类型：</span>
              <Select
                style={{ width: 120 }}
                onChange={this.handleChange.bind(this, 'exam_id')}
              >
                {examTypeList &&
                  examTypeList.map((item) => {
                    return (
                      <Option key={item.exam_id} value={item.exam_id}>
                        {item.exam_name}
                      </Option>
                    );
                  })}
              </Select>
            </div>
            <div>
              <span>题目类型：</span>
              <Select
                style={{ width: 120 }}
                onChange={this.handleChange.bind(this, 'questions_type_id')}
              >
                {questionsType &&
                  questionsType.map((item) => {
                    return (
                      <Option
                        key={item.questions_type_id}
                        value={item.questions_type_id}
                      >
                        {item.questions_type_text}
                      </Option>
                    );
                  })}
              </Select>
            </div>
            <Button
              style={{
                backgroundColor: '#063DFD',
                width: '100px',
                borderRadius: '5px',
              }}
              type="primary"
              icon={<SearchOutlined />}
              onClick={this.filter.bind(this)}
            >
              查询
            </Button>
          </div>
        </div>
        <div className="watchQuestion_con">
          {questionList &&
            questionList.map((item) => (
              <div key={item.questions_id}>
                <div>
                  <span>{item.title}</span>
                  <span onClick={()=>{
                    history.push("/index/editQuestion/"+item.questions_id)
                  }}>编辑</span>
                </div>
                <div>
                  <span>{item.questions_type_text}</span>
                  <span>{item.subject_text}</span>
                  <span>{item.exam_name}</span>
                </div>
                <div>
                  <span>{item.user_name} 发布</span>
                </div>
              </div>
            ))}
        </div>
      </div>
    );
  }
}
export default connect(
  (state: IState) => {
    return { ...state.watchQuestion };
  },
  (dispatch) => {
    return {
      getExamType() {
        dispatch({ type: 'watchQuestion/GET_EXAM_TYPE' });
      },
      getQuestionsType() {
        dispatch({ type: 'watchQuestion/GET_QUESTION_TYPE' });
      },
      getSubjectList() {
        dispatch({ type: 'watchQuestion/GET_SUBJECT_LIST' });
      },
      getQuestionsList() {
        dispatch({ type: 'watchQuestion/GET_QUESTION_LIST' });
      },
      getQuestionsCondition(payload: Questions_Condition) {
        dispatch({ type: 'watchQuestion/GET_QUESTION_CONDITION', payload });
      },
    };
  },
)(WatchQuestion);
